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Graphic Effects 


Mae 


| have rounded 
corners!!! 


| have a shadow! 


man 
animated! 


New Effects In 
CSS3 


¢ New additions in CSS3 allow you to 
create a more engaging experience for 
users 


¢ 2D and 3D animations and 
transformations make moving from 
page to page more fun 

Drop shadows and rounded corners 
make text and graphics more visually 
appealing 


Creating Rounded Corners 


In CSS3, you can now add rounded 
corners to layout elements, including 
headers, footers, sidebars, and 
images 

Use the border- radius property 
along with a length value, such as 
pixels, ems, or a percentage 


¢ the higher the value, the more rounded a 
corner will be 


* some browsers have problems rendering a 
percentage value 

You can round individual corners with 

the following properties: 

* border-top-left-radius 

¢ border-top-right- radius 

* border-bottom-right-radius 
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.rounded { 

border-radius: 20px 20px 20px 
20px; 
} 


| have rounded corners!!! 


Creating Shadows 


¢ Add drop shadows to elements using the box- shadow property 


* a drop shadow is a visual effect that makes an object appear like it is floating above 
other objects on a document 


¢ There are six attributes that can be modified when using the 
box- shadow property: h- shadow, v- shadow, blur, spread, 
color, and inset 


¢ The h-shadow and v-shadow attributes must be included, while 
the others are optional 


box-shadow: 10px 10px 8px #808080; 
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h-shadow _v-shadow blur color 


box-shadow Attributes 


h-shadow Defines the horizontal offset of the shadow. A positive value 
places the shadow to the right of the object, while a negative 
value places it to the left. 


v-shadow Defines the vertical offset of the shadow. A positive value places 
the shadow above the object, while a negative value places it 
below. 

blur Defines the amount of blur applied to the shadow. 

Spread Determines the size of the shadow. 

COLO Determines the color of the shadow. 


inset Moves the shadow to the inside of the box. 


Applying Transparency 


Apply the effect of transparency 1.0 
with the opacity property 
¢ Opacity determines how transparent an 

object appears 
The value for the opacity object 9.5 
is anumber between 0.0 and 
1.0 


¢ 1.0 means that the object is entirely 
opaque, while 0.0 means that it is entirely 
transparent 0) ? 


Rounded Corners, Shadows, and Transparency 


Demo 
.rounded { 

border-radius: 20px 20px 20px 
20px; 

box-shadow: 10px 10px 8px 
#808080; 

Opacity: .5; 
} 


Background Gradients 


transition from one color to METHODS 


another Linear- Creates a gradient from 
© In CSS3 you can apply gradient top to bottom or vice 
’ versa, or from corner to 
gradients to a number of corner 
objects, such as headers, radial - Creates a gradient that 
footers. buttons. and more gradient radiates out from the 
a T center 
Gradients are app led repeating- Repeats a linear gradient 
through the background incor 
property with one of the gradient 
methods featured in the table repeating- Repeats a radial gradient 
to the right radial - with alternating bands of 


gradient gradient color 


Linear Gradients 


¢ Linear gradients can be from 
top to bottom, bottom to top, 
or from corner to corner 


¢ A default gradient goes from 
top to bottom 


¢ Insert to top, to bottom, to right, or to 
Left as the first value with the linear- 
gradient method to control the direction 


Radial Gradients 


¢ Radial gradients start from 
the center of an object and 
radiate outwards 

¢ The first values used with the 
radial-gradient method 
determine the horizontal and 
vertical center values 


Gradients Demo 


.gradiented { 
background: Linear-gradient(to top, white 20%, blue 80%); 
} 


2D and 3D 
Transformations 


Bae 


Transformations 


¢ In HTML5/CSS3, you can now transform 2D and 3D objects 
¢ A transform Is an effect that lets you change the size, shape, 
and position of an element 
¢ This includes rotating, scaling, stretching, spinning and moving elements 
¢ To add transformations, use the transform property with one 
of its methods 


Methods for the Transform Property, 


matrix 
ile Wie Ls Lal links i) 


matrix3d 

Cie lin lap ilelale ila labe 
elite (ike laine abe la 
12), 
perspective(n) 


rotate (angle) 


rotate3d 
(x,y,Z,angle) 


rotatex (angle) 


Specifies a 2D 
transformation using 
a six-value matrix 


Specifies a 2D 
transformation using 
a sixteen-value 
matrix 

Specifies a 
perspective view for 
a 3D element that’s 
been transformed 


Rotates an element 
in 2D 
Rotates an element 
in 3D 
Rotates an element 


rotateyY 
(angle) 


rotateZ 
(angle) 
scale (x,y) 
scale3d 
(Xa yaz) 


scalex (x) 


scaleY (y) 


Rotates an element in 
3D along the y-axis 


Rotates an element in 
3D along the z-axis 


Scales an element in 2D 
(width and height) 


Scales an element in 3D 
(width, height, and an 
arbitrary vector in 3D 
Space) 


Scales an element in 3D 
along the x-axis 


Scales an element in 3D 
along the y-axis 


Methods for the Transform Property, 


scaleZ (Zz) Scales an element in translateX (x) Translates an element in 
3D along the z-axis 3D using the x-axis 
(a vector in 3D translateY (y) Translates an element in 
space) 3D using the y-axis 
skew (x-angle, Skews anelementin  +translateZ (z) ‘Translates an element in 
y-angle) 2D along the x-axis 3D using the z-axis 
and the y-axis 
SkewX (angle) Skews an element in 
3D along the x-axis 
SkewY (angle) Skews an element in 


3D along the y-axis 


translate (x,y) Translates (moves) 
an element in 2D 


translate3d Translates (moves) 
(x,yY,Z) an element in 3D 


2D Translations 


¢ Atranslation moves an element without rotating, skewing, or 
turning the image. 


¢ To translate an object, use the transform property in 
combination with the translate() method 


¢ The translate() method accepts two values: one to adjust its 
position on the x-axis and another on the y-axis 


.translated { 
transform: translate(200px, Opx); 
} 


X-axis y-axis 


2D Scaling 


¢ Scaling an element will increase or decrease its size. 
¢ To scale an object, use the transform property in combination 
with the scale() method 


¢ The scale() method accepts two values: a factor to adjust its 
width and another to adjust its height 


.scaled { 
transform: scale(2, 2); 


) so 


width height 


2D Rotation 


¢ Rotating an element will turn 
it clockwise or 
counterclockwise 


¢ To rotate an object, use the 
transform property in 
combination with the 
rotate() method 

¢ The rotate() method rotated { 
accepts one value: the transtorm: 
number of degrees to rotate not abes eee) 
the object y 


3D Rotation 


¢ To 3D rotate an object, use 


¢ The rotatex() and 


3D rotation will rotate an 
element around its x-axis or 
y-axis 


“Ez 


transform: rotateX(30deg) ; 
rotateY() methods accepts 


one value: the number of _ 


degrees to rotate the object transform: rotateY(45deqg) ; 
around an axis 


the transform property in 
combination with the 
rotateX() or rotatey() 
methods 


2D Skewing 


¢ Skewing an element will 
stretch it one or more 
directions 


¢ To skew an object, use the 
transform property in 
combination with the skew() 
method 


.skewed { 
¢ The skew() method accepts transform: skew(45deg, 
two values: the number of 15deg); 


degrees to turn the object } 
around the x-axis and 
another for the y-axis 


Transitions 


¢ In CSS3, a transition is a .transitioned { 
visible movement from one 7 Se ae, 
state to another on screen Pe ae g 


3 transition-duration: 2s; } 
¢ To create a transition, use the 
transition property . transitioned: hover{ 


* Set the value as the property that you background: #ff6a00; } 
would like to change 


¢ You must also set the 
duration, the delay, and the 
timing function 


¢ This can be done with the transition 
property or by using specific properties 
for each (see next slide) 


CSS3 Transition Properties 


transition Is the shorthand way to specify settings for transition- property, 
transition-delay, transition-duration, and transition-timing- 
function at once 


transition- Specifies the CSS properties that are to be transitioned 
property 


transition-delay Specifies the amount of time that passes after the value changes 
and before the transition starts; in seconds or milliseconds 


transition- Specifies the length of the transition in seconds or milliseconds; 
duration Starts after the transition-delay property 

transition-timing- Specifies the speed curve of the transition effect; allows a 
function transition to change speed over its duration 


Default value = ease, which starts relatively fast and slows down 
toward the end 


Animations 


¢ Animations move static eee glow { 
Mages IN a Way that makes background-color: blue; 
them appear as though they } 
are moving 50% { 

¢ Unlike transitions, animations Sehr anin ene ean 
use the @keyframes rule, to { 
which allows you to adjust background-color: red; 
the timings of an animation I 


i 


¢ You can dictate when an action occurs 
by using a percent 
° 1.e. 50% of the way through this 
animation, the element should be 
yellow 


.animated { 
animation-name: glow; 
animation-duration: 5s; 


CSS3 Animation Properties, pt. 1 


PROPERTY | DEFAUL | DESCRIPTION 
T VALUE 


@key frames Creates the animation 

animation Shorthand may to specify all animation properties at once, other 
than the animation-play-state property 

animation- Specifies the @keyframes animation name 

name 

animation- 0 Specifies the length of an animation; in seconds or milliseconds 

duration 

animation- 1 Specifies how the animation progresses during one cycle 

timing- 

function 

animation- none Specifies when the animation starts 


delay 


CSS3 Animation Properties, pt. 2 


PROPERTY DEFAULT | DESCRIPTION 
VALUE 


animation- i Specifies the number of cycles of an animation 
iteration-count 

animation-fill- none Specifies the values applied by the animation outside 
mode the time it executes 

animation- normal Specifies whether the animation plays in reverse on 
direction alternate cycles 

animation-play- running Specifies the state of the animation; values are 
state running or paused 

animation- 1 Specifies the number of cycles of an animation 
iteration-count 

animation-fill- none Specifies the values applied by the animation outside 


mode the time it executes 
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